<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>vue1</title>
        <script src="../js/vue.js"></script>
    </head>
    <body>
        <div id="app">
            <father></father>
        </div>
        <template id="father">
            <div>

                <p>{{age}}</p>
                <p>{{name}}</p>
                <button @click="say">按钮1</button>
                <!-- 值传递 v-bind:名称="参数"  方法传递v-on:名称="方法名"-->
                <son :name="name" :age="age" @parentas="say">
                    <div slot="one">追加数据1</div>
                    <div slot="two">追加数据2</div>
                    <div>追加数据3</div>
                </son>
            </div>
        </template>

        <template id="son">
            <div>
                <!-- <p>子组件111</p> -->
                <p>{{name}}</p>
                <p>{{age}}</p>
                <!-- slot标签为插槽， -->
                <slot name="one">默认数据</slot>
                <slot name="two">默认数据</slot>
                <button @click="sonFn">按钮2</button>
                
            </div>
        </template>
        <script>

            Vue.component("father",{
                template:"#father",
                data:function(){
                    return {
                        name:"aaa",
                        age:28
                    }
                },
                methods:{
                    say(data){
                        alert("父组件中的方法")
                        console.log(data)
                    }
                },
                // 子组件
                components: {
                    "son": {
                        template:"#son",
                        props: ["name","age"],
                        methods: {
                            sonFn(){
                                // 第一个参数：需要调用函数的名称
                                // 第二个参数：给调用的函数传递参数
                              this.$emit("parentas", "cccc")  
                            }
                        },
                    }
                }
            })
            

            let vue = new Vue({
        // 告诉vue的实例对象，将来需要控制界面上的那个区域
                el:'#app',
                data:{
                    name:"内容1"
                },
                //  专门用于存储监听事件的回调函数
                methods: {
                    
                },
                // 专门用于定义计算数据性
                computed:{

                },
                // 专门用于定义局部组件
                comments:{
                    "home":{
                        template:"#home"
                    }
                }
            });
        </script>
    </body>
</html>